<template>
  <div class="app-container">
    <div style="display: flex;justify-content: space-between;gap:20px">
      <el-card style="flex:1">
        <div slot="header" class="clearfix">
          <span>今日生产统计</span>
        </div>
        <div class="produce-stats">
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>计划生产总量</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>已生产方量</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>已发车次</span>
              </div>
        </div>
      </el-card>
      <el-card style="flex:1">
        <div slot="header" class="clearfix">
          <span>机组生产量</span>
        </div>
        <div class="produce-stats">
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>一号机组</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>二号机组</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>三号机组</span>
              </div>
        </div>
      </el-card>
      <el-card style="flex:1">
        <div slot="header" class="clearfix">
          <span>机组含水率</span>
        </div>
        <div class="produce-stats">
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>一号机组</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>二号机组</span>
              </div>
              <div class="produce-stats-item">
                <span>{{ 0 }}</span>
                <span>三号机组</span>
              </div>
        </div>
      </el-card>
    </div>
    <div style="margin-top: 20px">
      <el-tabs type="border-card" v-model="activeName" @tab-click="getConcreteList">
        <el-tab-pane name="sczList" label="生产中">
          <div>
            <el-card class="card-item" style="flex:1" v-for="item in sczList" :key="item.id">
              <div slot="header" class="clearfix">
                <div class="card-header">
                  <div>
                    订单编号：{{ item.orderNo }}
                  </div>
                  <div>
                    砼单ID：{{ item.concreteNo }}
                  </div>
                  <div>
                    创建时间：{{ item.createTime }}
                  </div>
                  <!-- <div>
                                        出厂时间：{{item.createTime}}
                                    </div> -->
                  <div>
                    <span v-if="item.concreteStatus == 3">生产中</span>
                    <span v-if="item.concreteStatus == 4">已签收</span>
                  </div>
                </div>

              </div>
              <div class="card-body">
                <div> 工程名称：{{ item.engineeringName }} </div>
                <div class="card-body-flex">
                  <div>
                    生产方量：{{ item.productVolume }}
                  </div>
                  <div>
                    主产品标号：{{ item.primaryDesign }}
                  </div>
                  <div>
                    附加产品标号：{{ item.primaryFirstCategory }}
                  </div>
                  <div>
                    砼车：{{ item.pumpCarNo }}
                  </div>
                  <div>
                    生产机组：{{ item.productUnits }}
                  </div>
                  <div>
                    <el-button type="primary">查看配比</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
        <el-tab-pane name="yscList" label="已生产">
          <div>
            <el-card class="card-item" style="flex:1" v-for="item in yscList" :key="item.id">
              <div slot="header" class="clearfix">
                <div class="card-header">
                  <div>
                    订单编号：{{ item.orderNo }}
                  </div>
                  <div>
                    砼单ID：{{ item.concreteNo }}
                  </div>
                  <div>
                    创建时间：{{ item.createTime }}
                  </div>
                  <!-- <div>
                                        出厂时间：{{item.createTime}}
                                    </div> -->
                  <div>
                    <span v-if="item.concreteStatus == 3">生产中</span>
                    <span v-if="item.concreteStatus == 4">已签收</span>
                  </div>
                </div>

              </div>
              <div class="card-body">
                <div> 工程名称：{{ item.engineeringName }} </div>
                <div class="card-body-flex">
                  <div>
                    生产方量：{{ item.productVolume }}
                  </div>
                  <div>
                    主产品标号：{{ item.primaryDesign }}
                  </div>
                  <div>
                    附加产品标号：{{ item.primaryFirstCategory }}
                  </div>
                  <div>
                    砼车：{{ item.pumpCarNo }}
                  </div>
                  <div>
                    生产机组：{{ item.productUnits }}
                  </div>
                  <div>
                    <el-button type="primary">查看配比</el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>


<script>

import { concreteList } from "@/api/service/production/productionTaskScreen";
export default {
  data() {
    return {
      activeName: "sczList",

      sczList: [],
      yscList: [],
      // dataList: [],
      queryParams: {
        concreteStatus: 2
      }
    }
  },
  methods: {
    async getConcreteList() {
      const res = await concreteList({
        concreteStatus: this.activeName == "sczList" ? 2 : 4
      })
      this[this.activeName] = res.rows
    }
  },
  created() {
    this.getConcreteList()
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-card__body{
  min-width: 200px;
}
.card-item {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
  }

  .card-body-flex {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.produce-stats {
  display: flex;
  flex-wrap: wrap;

  .produce-stats-item {
    text-align: center;
    width: 33.33333%;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    &:nth-child(1) {
      margin-bottom: 20px;
      color: #E6A23C;
    }

    &:nth-child(2) {
      margin-bottom: 20px;
      color: #F56C6C;
    }

    &:nth-child(3) {
      margin-bottom: 20px;
      color: #67C23A;
    }

    &:nth-child(4) {
      margin-bottom: 20px;
      color: #e6a23c;
    }

    &:nth-child(5) {
      margin-bottom: 20px;
      color: #409eff;
    }

    &:nth-child(6) {
      margin-bottom: 20px;
      color: #F56C6C;
    }

    span:nth-child(1) {
      // color: blue;
      font-size: 30px;
      font-weight: bold;
    }
  }
}
</style>
